<template>
    <dv-border-box-7 :color="['#084FA0','#06073B']" style="height:316px;">
        <div class="passenger-box">
            <div class="title-box">
                <span>今年客流量统计</span>
            </div>
            <div class="tab-box">
                <el-radio-group  v-model="tabData" size="small" @change="handleChange">
                    <el-radio-button label="day">日</el-radio-button>
                    <el-radio-button label="month">月</el-radio-button>
                    <el-radio-button label="year">年</el-radio-button>
                </el-radio-group>
            </div>
            <div ref="passenger" style="width: 100%;height: 100%;"></div>
        </div>
        
    </dv-border-box-7>
</template>

<script>
import * as echarts from "echarts"
export default {
    data(){
        return {
            tabData:"day",
            passengerEchart:null,
            some:0,
            timer:null

        }
    },
    methods:{
        dayFn(){
            return new Promise((resolve)=>{
                // 操作
                let dayDom=this.$refs.passenger
                let dayEchart=echarts.init(dayDom)
                // 重新渲染
                const options={
                    tooltip:{
                        show:true,
                        trigger:"axis",
                        // alwaysShowContent:true,
                        triggerOn:"mousemove",
                        textStyle:{
                            color:"#fff"
                        },
                        backgroundColor:'rgba(6,17,71,0.8)',
                        borderColor:"#0E8BFF",
                        borderWidth:2,
                        // formatter:"{b}销售额<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}"
                        // formatter:function(params){
                        //     console.log(params,"params")
                        //     if(params.length==0){return}
                        //     let base=params[0].name+"销售额"+"<br/>"
                        //     for(let i=0;i<params.length;i++){
                        //         base=base+`<span style="display: inline-block;padding: 5px 5px 5px 0px;"><i style="display: inline-block;width: 10px;height: 10px;background:${params[i].color};border-radius: 50%;"></i>
                        //             </span>`+params[i].seriesName+": "+params[i].value+"<br/>"
                        //     }
                        //     return base                
                        // }

                    },
                    legend:{
                        type:"plain",
                        show:true,
                        top:"7%",
                        right:"2%",
                        icon:"rect",
                        itemWidth:15,
                        itemHeight:15,
                        align:"left",
                        itemGap:10,
                        textStyle:{
                            fontSize:"15px",
                        },

                        data:[
                            {
                                name:"长者会员",
                                textStyle:{
                                    color:"#4FA6F7",
                                },
                                itemStyle:{
                                    color:"#0E8BFF"
                                },
                                
                            },
                            {
                                name:"其他顾客",
                                textStyle:{
                                    color:"#4FA6F7"
                                },
                                itemStyle:{
                                    color:"#E4C431"
                                },
                            },
                        ]
                    },
                    grid:{
                        show:false,
                        top:"25%",
                        left:"5%",
                        right:"5%",
                        bottom:"8%",
                        containLabel:true
                    },
                    xAxis:{
                        type:"time",
                        scale: true,
                        // boundaryGap: ['20%', '20%'],
                        splitNumber:18,
                        min: "2023-09-07 06:00:00",
                        max: "2023-09-07 20:00:00",
                        show:true,
                        position:"bottom",
                        inverse:false,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:"#0d2766"
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel:{
                            interval:0,
                            show:true,
                            color:"#4FA6F7"
                        },
                        splitLine:{
                            show:false
                        },
                        // data:[
                        //     {
                        //         value:"一月"
                        //     },
                        //     {
                        //         value:"二月"
                        //     },
                        //     {
                        //         value:"三月"
                        //     },
                        //     {
                        //         value:"四月"
                        //     },
                        //     {
                        //         value:"五月"
                        //     },
                        //     {
                        //         value:"六月"
                        //     },
                        //     {
                        //         value:"七月"
                        //     },
                        //     {
                        //         value:"八月"
                        //     },
                        //     {
                        //         value:"九月"
                        //     },
                        //     {
                        //         value:"十月"
                        //     },
                        //     {
                        //         value:"十一月"
                        //     },
                        //     {
                        //         value:"十二月"
                        //     },
                        // ]
                    },

                    yAxis:{
                        type:"value",
                        show:true,
                        position:"left",
                        inverse:false,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:"#0d2766"
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel:{
                            interval:0,
                            show:true,
                            color:"#4FA6F7"
                        },
                        splitLine:{
                            show:false
                        }

                    },
                    series:[
                        {
                            type:"line",
                            name:"总数",
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#1cdbfe"
                            },
                            lineStyle:{},
                            data:[
                                ["2023-09-07 06:31:00",50],
                                ["2023-09-07 07:31:00",110],
                                ["2023-09-07 08:31:00",300],
                                ["2023-09-07 09:31:00",40],
                                ["2023-09-07 10:31:00",215],
                                ["2023-09-07 11:31:00",652],
                                ["2023-09-07 12:31:00",371],
                                ["2023-09-07 13:31:00",144],
                                ["2023-09-07 14:31:00",5],
                                ["2023-09-07 15:31:00",25],
                                ["2023-09-07 16:31:00",522],
                                ["2023-09-07 17:31:00",623],
                                ["2023-09-07 18:31:00",130],
                                ["2023-09-07 19:31:00",52],
                            ],
                        },
                        {
                            type:"bar",
                            barWidth:20,
                            stack:"总数",
                            name:"长者会员",
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#0DDE9C"
                            },
                            itemStyle: {
                                barBorderRadius: [10,10,0,0],
                                    color:  {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(14, 139, 255, 1)' // 100% 处的颜色
                                    
                                }, {
                                    offset: 1,
                                    color: 'rgba(21, 25, 82, 0)' // 0% 处的颜色
                                
                                }],
                                global: false // 缺省为 false
                                }
                    
                            },
                            data:[
                                ["2023-09-07 06:31:00",50],
                                ["2023-09-07 07:31:00",100],
                                ["2023-09-07 08:31:00",200],
                                ["2023-09-07 09:31:00",30],
                                ["2023-09-07 10:31:00",150],
                                ["2023-09-07 11:31:00",496],
                                ["2023-09-07 12:31:00",166],
                                ["2023-09-07 13:31:00",12],
                                ["2023-09-07 14:31:00",0],
                                ["2023-09-07 15:31:00",10],
                                ["2023-09-07 16:31:00",468],
                                ["2023-09-07 17:31:00",368],
                                ["2023-09-07 18:31:00",32],
                                ["2023-09-07 19:31:00",0],
                            ],
                        
                        },
                        {
                            type:"bar",
                            barWidth:20,
                            stack:"总数",
                            name:"其他顾客",
                            barGap:'-100%',
                            z:-12,
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#00A3F8"
                            },
                            itemStyle: {
                                barBorderRadius: [10,10,0,0],
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(228, 196, 49, 1)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(21, 25, 82, 0)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                    }
                    
                            },
                            data:[
                                ["2023-09-07 06:31:00",0],
                                ["2023-09-07 07:31:00",10],
                                ["2023-09-07 08:31:00",100],
                                ["2023-09-07 09:31:00",10],
                                ["2023-09-07 10:31:00",65],
                                ["2023-09-07 11:31:00",156],
                                ["2023-09-07 12:31:00",205],
                                ["2023-09-07 13:31:00",132],
                                ["2023-09-07 14:31:00",5],
                                ["2023-09-07 15:31:00",15],
                                ["2023-09-07 16:31:00",54],
                                ["2023-09-07 17:31:00",255],
                                ["2023-09-07 18:31:00",98],
                                ["2023-09-07 19:31:00",52],
                            ],
                        
                        },
                    

                    ]
            }
                dayEchart.setOption(options)  
                console.log("日-2秒后变月");
                setTimeout(()=>{
                    this.tabData="month"
                    const dayPromise=this.monthFn()
                    resolve(dayPromise)

                },3000)

            })
        },
        monthFn(){
            return new Promise((resolve)=>{
                // 操作
                let monthDom=this.$refs.passenger
                let monthEchart=echarts.init(monthDom)
                // 重新渲染
                const options={
                tooltip:{
                    show:true,
                    trigger:"axis",
                    // alwaysShowContent:true,
                    triggerOn:"mousemove",
                    textStyle:{
                        color:"#fff"
                    },
                    backgroundColor:'rgba(6,17,71,0.8)',
                    borderColor:"#0E8BFF",
                    borderWidth:2,
                    // formatter:"{b}销售额<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}"
                    // formatter:function(params){
                    //     console.log(params,"params")
                    //     if(params.length==0){return}
                    //     let base=params[0].name+"销售额"+"<br/>"
                    //     for(let i=0;i<params.length;i++){
                    //         base=base+`<span style="display: inline-block;padding: 5px 5px 5px 0px;"><i style="display: inline-block;width: 10px;height: 10px;background:${params[i].color};border-radius: 50%;"></i>
                    //             </span>`+params[i].seriesName+": "+params[i].value+"<br/>"
                    //     }
                    //     return base                
                    // }

                },
                legend:{
                    type:"plain",
                    show:true,
                    top:"7%",
                    right:"2%",
                    icon:"rect",
                    itemWidth:15,
                    itemHeight:15,
                    align:"left",
                    itemGap:10,
                    textStyle:{
                        fontSize:"15px",
                    },

                    data:[
                        {
                            name:"长者会员",
                            textStyle:{
                                color:"#4FA6F7",
                            },
                            itemStyle:{
                                color:"#0E8BFF"
                            },
                            
                        },
                        {
                            name:"其他顾客",
                            textStyle:{
                                color:"#4FA6F7"
                            },
                            itemStyle:{
                                color:"#E4C431"
                            },
                        },
                    ]
                },
                grid:{
                    show:false,
                    top:"25%",
                    left:"5%",
                    right:"5%",
                    bottom:"8%",
                    containLabel:true
                },
                xAxis:{
                    type:"category",
                    scale: true,
                    // boundaryGap: ['20%', '20%'],
                    // splitNumber:18,
                    // min: "2023-09-07 06:00:00",
                    // max: "2023-09-07 20:00:00",
                    show:true,
                    position:"bottom",
                    inverse:false,
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:"#0d2766"
                        }
                    },
                    axisTick:{
                        show:false
                    },
                    axisLabel:{
                        interval:0,
                        show:true,
                        color:"#4FA6F7"
                    },
                    splitLine:{
                        show:false
                    },
                    data:[
                        "1号",
                        "2号",
                        "3号",
                        "4号",
                        "5号",
                        "6号",
                        "7号",
                        "8号",
                        "9号",
                        "10号",
                        "11号",
                        "12号",
                        "13号",
                        "14号",
                        "15号",
                        "16号",
                        "17号",
                        "18号",
                        "19号",
                        "20号",
                        "21号",
                        "22号",
                        "23号",
                    ]

                },

                yAxis:{
                    type:"value",
                    show:true,
                    position:"left",
                    inverse:false,
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:"#0d2766"
                        }
                    },
                    axisTick:{
                        show:false
                    },
                    axisLabel:{
                        interval:0,
                        show:true,
                        color:"#4FA6F7"
                    },
                    splitLine:{
                        show:false
                    }

                },
                series:[
                    {
                        type:"line",
                        name:"总数",
                        symbol:"circle",
                        symbolSize:8,
                        label:{
                            show:false,
                            color:"#fff"
                        },
                        endLabel:{//最后端点的文字
                            show:false
                        },
                        itemStyle:{
                            color:"#1cdbfe"
                        },
                        data:[
                            {
                                name:"1号",
                                value:"2867"
                            },
                            {
                                name:"2号",
                                value:"1439"
                            },
                            {
                                name:"3号",
                                value:"1258"
                            },
                            {
                                name:"4号",
                                value:"3152"
                            },
                            {
                                name:"5号",
                                value:"3379"
                            },
                            {
                                name:"6号",
                                value:"2930"
                            },
                            {
                                name:"7号",
                                value:"2780"
                            },
                            {
                                name:"8号",
                                value:"2301"
                            },
                            {
                                name:"9号",
                                value:"1459"
                            },
                            {
                                name:"10号",
                                value:"1722"
                            },
                            {
                                name:"11号",
                                value:"3054"
                            },
                            {
                                name:"12号",
                                value:"2954"
                            },
                            {
                                name:"13号",
                                value:"3446"
                            },
                            {
                                name:"14号",
                                value:"3299"
                            },
                            {
                                name:"15号",
                                value:"2802"
                            },
                            {
                                name:"16号",
                                value:"2169"
                            },
                            {
                                name:"17号",
                                value:"2199"
                            },
                            {
                                name:"18号",
                                value:"3341"
                            },
                            {
                                name:"19号",
                                value:"3381"
                            },
                            {
                                name:"20号",
                                value:"3170"
                            },
                            {
                                name:"21号",
                                value:"2909"
                            },
                            {
                                name:"22号",
                                value:"2585"
                            },
                            {
                                name:"23号",
                                value:"1828"
                            },
                        
                        ],
                
                    },
                    {
                        type:"bar",
                        barWidth:20,
                        stack:"总数",
                        name:"长者会员",
                        symbol:"circle",
                        symbolSize:8,
                        label:{
                            show:false,
                            color:"#fff"
                        },
                        endLabel:{//最后端点的文字
                            show:false
                        },
                        itemStyle:{
                            color:"#0DDE9C"
                        },
                        itemStyle: {
                            barBorderRadius: [10,10,0,0],
                                color:  {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                            offset: 0,
                            color: 'rgba(14, 139, 255, 1)' // 100% 处的颜色
                            
                        }, {
                            offset: 1,
                            color: 'rgba(21, 25, 82, 0)' // 0% 处的颜色
                           
                        }],
                            global: false // 缺省为 false
                            }
                
                        },
                        data:[
                            {
                                name:"1号",
                                value:"2082"
                            },
                            {
                                name:"2号",
                                value:"882"
                            },
                            {
                                name:"3号",
                                value:"756"
                            },
                            {
                                name:"4号",
                                value:"2154"
                            },
                            {
                                name:"5号",
                                value:"2354"
                            },
                            {
                                name:"6号",
                                value:"2045"
                            },
                            {
                                name:"7号",
                                value:"1995"
                            },
                            {
                                name:"8号",
                                value:"1635"
                            },
                            {
                                name:"9号",
                                value:"1002"
                            },
                            {
                                name:"10号",
                                value:"1120"
                            },
                            {
                                name:"11号",
                                value:"2053"
                            },
                            {
                                name:"12号",
                                value:"1998"
                            },
                            {
                                name:"13号",
                                value:"2245"
                            },
                            {
                                name:"14号",
                                value:"2401"
                            },
                            {
                                name:"15号",
                                value:"2001"
                            },
                            {
                                name:"16号",
                                value:"1668"
                            },
                            {
                                name:"17号",
                                value:"1778"
                            },
                            {
                                name:"18号",
                                value:"2231"
                            },
                            {
                                name:"19号",
                                value:"2354"
                            },
                            {
                                name:"20号",
                                value:"2214"
                            },
                            {
                                name:"21号",
                                value:"2034"
                            },
                            {
                                name:"22号",
                                value:"1898"
                            },
                            {
                                name:"23号",
                                value:"1520"
                            },
                        
                        ],
                    
                    },
                    {
                        type:"bar",
                        barWidth:20,
                        stack:"总数",
                        name:"其他顾客",
                        barGap:'-100%',
                        z:-12,
                        symbol:"circle",
                        symbolSize:8,
                        label:{
                            show:false,
                            color:"#fff"
                        },
                        endLabel:{//最后端点的文字
                            show:false
                        },
                        itemStyle:{
                            color:"#00A3F8"
                        },
                        itemStyle: {
                            barBorderRadius: [10,10,0,0],
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(228, 196, 49, 1)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(21, 25, 82, 0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                                }
                
                        },
                        data:[
                            {
                                name:"1号",
                                value:"785"
                            },
                            {
                                name:"2号",
                                value:"557"
                            },
                            {
                                name:"3号",
                                value:"502"
                            },
                            {
                                name:"4号",
                                value:"998"
                            },
                            {
                                name:"5号",
                                value:"1025"
                            },
                            {
                                name:"6号",
                                value:"885"
                            },
                            {
                                name:"7号",
                                value:"785"
                            },
                            {
                                name:"8号",
                                value:"666"
                            },
                            {
                                name:"9号",
                                value:"457"
                            },
                            {
                                name:"10号",
                                value:"602"
                            },
                            {
                                name:"11号",
                                value:"1001"
                            },
                            {
                                name:"12号",
                                value:"956"
                            },
                            {
                                name:"13号",
                                value:"1201"
                            },
                            {
                                name:"14号",
                                value:"898"
                            },
                            {
                                name:"15号",
                                value:"801"
                            },
                            {
                                name:"16号",
                                value:"501"
                            },
                            {
                                name:"17号",
                                value:"421"
                            },
                            {
                                name:"18号",
                                value:"1110"
                            },
                            {
                                name:"19号",
                                value:"1027"
                            },
                            {
                                name:"20号",
                                value:"956"
                            },
                            {
                                name:"21号",
                                value:"875"
                            },
                            {
                                name:"22号",
                                value:"687"
                            },
                            {
                                name:"23号",
                                value:"308"
                            },
                        
                        ],
                    
                    },
                

                ]
                }
                monthEchart.setOption(options)
                console.log("月-2秒后变年");
                setTimeout(()=>{
                    this.tabData="year"
                    const yearPromise=this.yearFn()
                    resolve(yearPromise)

                },3000)
                
            })
        },
        yearFn(){
            return new Promise((resolve)=>{
                // 操作
                let yearDom=this.$refs.passenger
                let yearEchart=echarts.init(yearDom)
                // 重新渲染
                const options={
                    tooltip:{
                        show:true,
                        trigger:"axis",
                        // alwaysShowContent:true,
                        triggerOn:"mousemove",
                        textStyle:{
                            color:"#fff"
                        },
                        backgroundColor:'rgba(6,17,71,0.8)',
                        borderColor:"#0E8BFF",
                        borderWidth:2,
                        // formatter:"{b}销售额<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}"
                        // formatter:function(params){
                        //     console.log(params,"params")
                        //     if(params.length==0){return}
                        //     let base=params[0].name+"销售额"+"<br/>"
                        //     for(let i=0;i<params.length;i++){
                        //         base=base+`<span style="display: inline-block;padding: 5px 5px 5px 0px;"><i style="display: inline-block;width: 10px;height: 10px;background:${params[i].color};border-radius: 50%;"></i>
                        //             </span>`+params[i].seriesName+": "+params[i].value+"<br/>"
                        //     }
                        //     return base                
                        // }

                    },
                    legend:{
                        type:"plain",
                        show:true,
                        top:"7%",
                        right:"2%",
                        icon:"rect",
                        itemWidth:15,
                        itemHeight:15,
                        align:"left",
                        itemGap:10,
                        textStyle:{
                            fontSize:"15px",
                        },

                        data:[
                            {
                                name:"长者会员",
                                textStyle:{
                                    color:"#4FA6F7",
                                },
                                itemStyle:{
                                    color:"#0E8BFF"
                                },
                                
                            },
                            {
                                name:"其他顾客",
                                textStyle:{
                                    color:"#4FA6F7"
                                },
                                itemStyle:{
                                    color:"#E4C431"
                                },
                            },
                        ]
                    },
                    grid:{
                        show:false,
                        top:"25%",
                        left:"5%",
                        right:"5%",
                        bottom:"8%",
                        containLabel:true
                    },
                    xAxis:{
                        type:"category",
                        scale: true,
                        // boundaryGap: ['20%', '20%'],
                        // splitNumber:18,
                        // min: "2023-09-07 06:00:00",
                        // max: "2023-09-07 20:00:00",
                        show:true,
                        position:"bottom",
                        inverse:false,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:"#0d2766"
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel:{
                            interval:0,
                            show:true,
                            color:"#4FA6F7"
                        },
                        splitLine:{
                            show:false
                        },
                        data:[
                            "1月",
                            "2月",
                            "3月",
                            "4月",
                            "5月",
                            "6月",
                            "7月",
                            "8月",
                            "9月",
                        ]

                    },

                    yAxis:{
                        type:"value",
                        show:true,
                        position:"left",
                        inverse:false,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:"#0d2766"
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel:{
                            interval:0,
                            show:true,
                            color:"#4FA6F7"
                        },
                        splitLine:{
                            show:false
                        }

                    },
                    series:[
                        {
                            type:"line",
                            name:"总数",
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#1cdbfe"
                            },
                            data:[
                                {
                                    name:"1月",
                                    value:"26868"
                                },
                                {
                                    name:"2月",
                                    value:"40453"
                                },
                                {
                                    name:"3月",
                                    value:"50868"
                                },
                                {
                                    name:"4月",
                                    value:"53868"
                                },
                                {
                                    name:"5月",
                                    value:"46216"
                                },
                                {
                                    name:"6月",
                                    value:"55868"
                                },
                                {
                                    name:"7月",
                                    value:"66754" 
                                },
                                {
                                    name:"8月",
                                    value:"64868"
                                },
                                {
                                    name:"9月",
                                    value:"42002"
                                },
                    
                            ],
                        },
                        {
                            type:"bar",
                            barWidth:20,
                            stack:"总数",
                            name:"长者会员",
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#0DDE9C"
                            },
                            itemStyle: {
                                barBorderRadius: [10,10,0,0],
                                    color:  {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(14, 139, 255, 1)' // 100% 处的颜色
                                    
                                }, {
                                    offset: 1,
                                    color: 'rgba(21, 25, 82, 0)' // 0% 处的颜色
                                
                                }],
                                global: false // 缺省为 false
                                }
                    
                            },
                            data:[
                                {
                                    name:"1月",
                                    value:"20214"
                                },
                                {
                                    name:"2月",
                                    value:"30457"
                                },
                                {
                                    name:"3月",
                                    value:"40214"
                                },
                                {
                                    name:"4月",
                                    value:"42214"
                                },
                                {
                                    name:"5月",
                                    value:"36214"
                                },
                                {
                                    name:"6月",
                                    value:"43214"
                                },
                                {
                                    name:"7月",
                                    value:"50214"
                                },
                                {
                                    name:"8月",
                                    value:"49214"
                                },
                                {
                                    name:"9月",
                                    value:"32004"
                                },
                    
                            ],
                        
                        },
                        {
                            type:"bar",
                            barWidth:20,
                            stack:"总数",
                            name:"其他顾客",
                            barGap:'-100%',
                            z:-12,
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#00A3F8"
                            },
                            itemStyle: {
                                barBorderRadius: [10,10,0,0],
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(228, 196, 49, 1)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(21, 25, 82, 0)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                    }
                    
                            },
                            data:[
                                {
                                    name:"1月",
                                    value:"6654"
                                },
                                {
                                    name:"2月",
                                    value:"9996"
                                },
                                {
                                    name:"3月",
                                    value:"10654"
                                },
                                {
                                    name:"4月",
                                    value:"11654"
                                },
                                {
                                    name:"5月",
                                    value:"10002"
                                },
                                {
                                    name:"6月",
                                    value:"12654"
                                },
                                {
                                    name:"7月",
                                    value:"16540"
                                },
                                {
                                    name:"8月",
                                    value:"15654"
                                },
                                {
                                    name:"9月",
                                    value:"9998"
                                },
                
                            ],
                        
                        },
                    ]
                }

                yearEchart.setOption(options)
                console.log("年-2秒后变日");
                setTimeout(()=>{
                    this.tabData="day"
                    const monthPromise=this.dayFn()
                    resolve(monthPromise)

                },3000)
                
            })
        },
        
        handleChange(val){
            console.log(val,"<<<===e 点击");
            if(val==="month"){
                let monthDom=this.$refs.passenger
                let monthEchart=echarts.init(monthDom)
                // 重新渲染
                const options={
                tooltip:{
                    show:true,
                    trigger:"axis",
                    // alwaysShowContent:true,
                    triggerOn:"mousemove",
                    textStyle:{
                        color:"#fff"
                    },
                    backgroundColor:'rgba(6,17,71,0.8)',
                    borderColor:"#0E8BFF",
                    borderWidth:2,
                    // formatter:"{b}销售额<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}"
                    // formatter:function(params){
                    //     console.log(params,"params")
                    //     if(params.length==0){return}
                    //     let base=params[0].name+"销售额"+"<br/>"
                    //     for(let i=0;i<params.length;i++){
                    //         base=base+`<span style="display: inline-block;padding: 5px 5px 5px 0px;"><i style="display: inline-block;width: 10px;height: 10px;background:${params[i].color};border-radius: 50%;"></i>
                    //             </span>`+params[i].seriesName+": "+params[i].value+"<br/>"
                    //     }
                    //     return base                
                    // }

                },
                legend:{
                    type:"plain",
                    show:true,
                    top:"7%",
                    right:"2%",
                    icon:"rect",
                    itemWidth:15,
                    itemHeight:15,
                    align:"left",
                    itemGap:10,
                    textStyle:{
                        fontSize:"15px",
                    },

                    data:[
                        {
                            name:"长者会员",
                            textStyle:{
                                color:"#4FA6F7",
                            },
                            itemStyle:{
                                color:"#0E8BFF"
                            },
                            
                        },
                        {
                            name:"其他顾客",
                            textStyle:{
                                color:"#4FA6F7"
                            },
                            itemStyle:{
                                color:"#E4C431"
                            },
                        },
                    ]
                },
                grid:{
                    show:false,
                    top:"25%",
                    left:"5%",
                    right:"5%",
                    bottom:"8%",
                    containLabel:true
                },
                xAxis:{
                    type:"category",
                    scale: true,
                    // boundaryGap: ['20%', '20%'],
                    // splitNumber:18,
                    // min: "2023-09-07 06:00:00",
                    // max: "2023-09-07 20:00:00",
                    show:true,
                    position:"bottom",
                    inverse:false,
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:"#0d2766"
                        }
                    },
                    axisTick:{
                        show:false
                    },
                    axisLabel:{
                        interval:0,
                        show:true,
                        color:"#4FA6F7"
                    },
                    splitLine:{
                        show:false
                    },
                    data:[
                        "1号",
                        "2号",
                        "3号",
                        "4号",
                        "5号",
                        "6号",
                        "7号",
                        "8号",
                        "9号",
                        "10号",
                        "11号",
                        "12号",
                        "13号",
                        "14号",
                        "15号",
                        "16号",
                        "17号",
                        "18号",
                        "19号",
                        "20号",
                        "21号",
                        "22号",
                        "23号",
                    ]

                },

                yAxis:{
                    type:"value",
                    show:true,
                    position:"left",
                    inverse:false,
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:"#0d2766"
                        }
                    },
                    axisTick:{
                        show:false
                    },
                    axisLabel:{
                        interval:0,
                        show:true,
                        color:"#4FA6F7"
                    },
                    splitLine:{
                        show:false
                    }

                },
                series:[
                    {
                        type:"line",
                        name:"总数",
                        symbol:"circle",
                        symbolSize:8,
                        label:{
                            show:false,
                            color:"#fff"
                        },
                        endLabel:{//最后端点的文字
                            show:false
                        },
                        itemStyle:{
                            color:"#1cdbfe"
                        },
                        data:[
                            {
                                name:"1号",
                                value:"2867"
                            },
                            {
                                name:"2号",
                                value:"1439"
                            },
                            {
                                name:"3号",
                                value:"1258"
                            },
                            {
                                name:"4号",
                                value:"3152"
                            },
                            {
                                name:"5号",
                                value:"3379"
                            },
                            {
                                name:"6号",
                                value:"2930"
                            },
                            {
                                name:"7号",
                                value:"2780"
                            },
                            {
                                name:"8号",
                                value:"2301"
                            },
                            {
                                name:"9号",
                                value:"1459"
                            },
                            {
                                name:"10号",
                                value:"1722"
                            },
                            {
                                name:"11号",
                                value:"3054"
                            },
                            {
                                name:"12号",
                                value:"2954"
                            },
                            {
                                name:"13号",
                                value:"3446"
                            },
                            {
                                name:"14号",
                                value:"3299"
                            },
                            {
                                name:"15号",
                                value:"2802"
                            },
                            {
                                name:"16号",
                                value:"2169"
                            },
                            {
                                name:"17号",
                                value:"2199"
                            },
                            {
                                name:"18号",
                                value:"3341"
                            },
                            {
                                name:"19号",
                                value:"3381"
                            },
                            {
                                name:"20号",
                                value:"3170"
                            },
                            {
                                name:"21号",
                                value:"2909"
                            },
                            {
                                name:"22号",
                                value:"2585"
                            },
                            {
                                name:"23号",
                                value:"1828"
                            },
                        
                        ],
                
                    },
                    {
                        type:"bar",
                        barWidth:20,
                        stack:"总数",
                        name:"长者会员",
                        symbol:"circle",
                        symbolSize:8,
                        label:{
                            show:false,
                            color:"#fff"
                        },
                        endLabel:{//最后端点的文字
                            show:false
                        },
                        itemStyle:{
                            color:"#0DDE9C"
                        },
                        itemStyle: {
                            barBorderRadius: [10,10,0,0],
                                color:  {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                            offset: 0,
                            color: 'rgba(14, 139, 255, 1)' // 100% 处的颜色
                            
                        }, {
                            offset: 1,
                            color: 'rgba(21, 25, 82, 0)' // 0% 处的颜色
                           
                        }],
                            global: false // 缺省为 false
                            }
                
                        },
                        data:[
                            {
                                name:"1号",
                                value:"2082"
                            },
                            {
                                name:"2号",
                                value:"882"
                            },
                            {
                                name:"3号",
                                value:"756"
                            },
                            {
                                name:"4号",
                                value:"2154"
                            },
                            {
                                name:"5号",
                                value:"2354"
                            },
                            {
                                name:"6号",
                                value:"2045"
                            },
                            {
                                name:"7号",
                                value:"1995"
                            },
                            {
                                name:"8号",
                                value:"1635"
                            },
                            {
                                name:"9号",
                                value:"1002"
                            },
                            {
                                name:"10号",
                                value:"1120"
                            },
                            {
                                name:"11号",
                                value:"2053"
                            },
                            {
                                name:"12号",
                                value:"1998"
                            },
                            {
                                name:"13号",
                                value:"2245"
                            },
                            {
                                name:"14号",
                                value:"2401"
                            },
                            {
                                name:"15号",
                                value:"2001"
                            },
                            {
                                name:"16号",
                                value:"1668"
                            },
                            {
                                name:"17号",
                                value:"1778"
                            },
                            {
                                name:"18号",
                                value:"2231"
                            },
                            {
                                name:"19号",
                                value:"2354"
                            },
                            {
                                name:"20号",
                                value:"2214"
                            },
                            {
                                name:"21号",
                                value:"2034"
                            },
                            {
                                name:"22号",
                                value:"1898"
                            },
                            {
                                name:"23号",
                                value:"1520"
                            },
                        
                        ],
                    
                    },
                    {
                        type:"bar",
                        barWidth:20,
                        stack:"总数",
                        name:"其他顾客",
                        barGap:'-100%',
                        z:-12,
                        symbol:"circle",
                        symbolSize:8,
                        label:{
                            show:false,
                            color:"#fff"
                        },
                        endLabel:{//最后端点的文字
                            show:false
                        },
                        itemStyle:{
                            color:"#00A3F8"
                        },
                        itemStyle: {
                            barBorderRadius: [10,10,0,0],
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(228, 196, 49, 1)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(21, 25, 82, 0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                                }
                
                        },
                        data:[
                            {
                                name:"1号",
                                value:"785"
                            },
                            {
                                name:"2号",
                                value:"557"
                            },
                            {
                                name:"3号",
                                value:"502"
                            },
                            {
                                name:"4号",
                                value:"998"
                            },
                            {
                                name:"5号",
                                value:"1025"
                            },
                            {
                                name:"6号",
                                value:"885"
                            },
                            {
                                name:"7号",
                                value:"785"
                            },
                            {
                                name:"8号",
                                value:"666"
                            },
                            {
                                name:"9号",
                                value:"457"
                            },
                            {
                                name:"10号",
                                value:"602"
                            },
                            {
                                name:"11号",
                                value:"1001"
                            },
                            {
                                name:"12号",
                                value:"956"
                            },
                            {
                                name:"13号",
                                value:"1201"
                            },
                            {
                                name:"14号",
                                value:"898"
                            },
                            {
                                name:"15号",
                                value:"801"
                            },
                            {
                                name:"16号",
                                value:"501"
                            },
                            {
                                name:"17号",
                                value:"421"
                            },
                            {
                                name:"18号",
                                value:"1110"
                            },
                            {
                                name:"19号",
                                value:"1027"
                            },
                            {
                                name:"20号",
                                value:"956"
                            },
                            {
                                name:"21号",
                                value:"875"
                            },
                            {
                                name:"22号",
                                value:"687"
                            },
                            {
                                name:"23号",
                                value:"308"
                            },
                        
                        ],
                    
                    },
                

                ]
                }
                monthEchart.setOption(options)
            }else if(val==="day"){
                let dayDom=this.$refs.passenger
                let dayEchart=echarts.init(dayDom)
                // 重新渲染
                const options={
                    tooltip:{
                        show:true,
                        trigger:"axis",
                        // alwaysShowContent:true,
                        triggerOn:"mousemove",
                        textStyle:{
                            color:"#fff"
                        },
                        backgroundColor:'rgba(6,17,71,0.8)',
                        borderColor:"#0E8BFF",
                        borderWidth:2,
                        // formatter:"{b}销售额<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}"
                        // formatter:function(params){
                        //     console.log(params,"params")
                        //     if(params.length==0){return}
                        //     let base=params[0].name+"销售额"+"<br/>"
                        //     for(let i=0;i<params.length;i++){
                        //         base=base+`<span style="display: inline-block;padding: 5px 5px 5px 0px;"><i style="display: inline-block;width: 10px;height: 10px;background:${params[i].color};border-radius: 50%;"></i>
                        //             </span>`+params[i].seriesName+": "+params[i].value+"<br/>"
                        //     }
                        //     return base                
                        // }

                    },
                    legend:{
                        type:"plain",
                        show:true,
                        top:"7%",
                        right:"2%",
                        icon:"rect",
                        itemWidth:15,
                        itemHeight:15,
                        align:"left",
                        itemGap:10,
                        textStyle:{
                            fontSize:"15px",
                        },

                        data:[
                            {
                                name:"长者会员",
                                textStyle:{
                                    color:"#4FA6F7",
                                },
                                itemStyle:{
                                    color:"#0E8BFF"
                                },
                                
                            },
                            {
                                name:"其他顾客",
                                textStyle:{
                                    color:"#4FA6F7"
                                },
                                itemStyle:{
                                    color:"#E4C431"
                                },
                            },
                        ]
                    },
                    grid:{
                        show:false,
                        top:"25%",
                        left:"5%",
                        right:"5%",
                        bottom:"8%",
                        containLabel:true
                    },
                    xAxis:{
                        type:"time",
                        scale: true,
                        // boundaryGap: ['20%', '20%'],
                        splitNumber:18,
                        min: "2023-09-07 06:00:00",
                        max: "2023-09-07 20:00:00",
                        show:true,
                        position:"bottom",
                        inverse:false,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:"#0d2766"
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel:{
                            interval:0,
                            show:true,
                            color:"#4FA6F7"
                        },
                        splitLine:{
                            show:false
                        },
                        // data:[
                        //     {
                        //         value:"一月"
                        //     },
                        //     {
                        //         value:"二月"
                        //     },
                        //     {
                        //         value:"三月"
                        //     },
                        //     {
                        //         value:"四月"
                        //     },
                        //     {
                        //         value:"五月"
                        //     },
                        //     {
                        //         value:"六月"
                        //     },
                        //     {
                        //         value:"七月"
                        //     },
                        //     {
                        //         value:"八月"
                        //     },
                        //     {
                        //         value:"九月"
                        //     },
                        //     {
                        //         value:"十月"
                        //     },
                        //     {
                        //         value:"十一月"
                        //     },
                        //     {
                        //         value:"十二月"
                        //     },
                        // ]
                    },

                    yAxis:{
                        type:"value",
                        show:true,
                        position:"left",
                        inverse:false,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:"#0d2766"
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel:{
                            interval:0,
                            show:true,
                            color:"#4FA6F7"
                        },
                        splitLine:{
                            show:false
                        }

                    },
                    series:[
                        {
                            type:"line",
                            name:"总数",
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#1cdbfe"
                            },
                            lineStyle:{},
                            data:[
                                ["2023-09-07 06:31:00",50],
                                ["2023-09-07 07:31:00",110],
                                ["2023-09-07 08:31:00",300],
                                ["2023-09-07 09:31:00",40],
                                ["2023-09-07 10:31:00",215],
                                ["2023-09-07 11:31:00",652],
                                ["2023-09-07 12:31:00",371],
                                ["2023-09-07 13:31:00",144],
                                ["2023-09-07 14:31:00",5],
                                ["2023-09-07 15:31:00",25],
                                ["2023-09-07 16:31:00",522],
                                ["2023-09-07 17:31:00",623],
                                ["2023-09-07 18:31:00",130],
                                ["2023-09-07 19:31:00",52],
                            ],
                        },
                        {
                            type:"bar",
                            barWidth:20,
                            stack:"总数",
                            name:"长者会员",
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#0DDE9C"
                            },
                            itemStyle: {
                                barBorderRadius: [10,10,0,0],
                                    color:  {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(14, 139, 255, 1)' // 100% 处的颜色
                                    
                                }, {
                                    offset: 1,
                                    color: 'rgba(21, 25, 82, 0)' // 0% 处的颜色
                                
                                }],
                                global: false // 缺省为 false
                                }
                    
                            },
                            data:[
                                ["2023-09-07 06:31:00",50],
                                ["2023-09-07 07:31:00",100],
                                ["2023-09-07 08:31:00",200],
                                ["2023-09-07 09:31:00",30],
                                ["2023-09-07 10:31:00",150],
                                ["2023-09-07 11:31:00",496],
                                ["2023-09-07 12:31:00",166],
                                ["2023-09-07 13:31:00",12],
                                ["2023-09-07 14:31:00",0],
                                ["2023-09-07 15:31:00",10],
                                ["2023-09-07 16:31:00",468],
                                ["2023-09-07 17:31:00",368],
                                ["2023-09-07 18:31:00",32],
                                ["2023-09-07 19:31:00",0],
                            ],
                        
                        },
                        {
                            type:"bar",
                            barWidth:20,
                            stack:"总数",
                            name:"其他顾客",
                            barGap:'-100%',
                            z:-12,
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#00A3F8"
                            },
                            itemStyle: {
                                barBorderRadius: [10,10,0,0],
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(228, 196, 49, 1)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(21, 25, 82, 0)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                    }
                    
                            },
                            data:[
                                ["2023-09-07 06:31:00",0],
                                ["2023-09-07 07:31:00",10],
                                ["2023-09-07 08:31:00",100],
                                ["2023-09-07 09:31:00",10],
                                ["2023-09-07 10:31:00",65],
                                ["2023-09-07 11:31:00",156],
                                ["2023-09-07 12:31:00",205],
                                ["2023-09-07 13:31:00",132],
                                ["2023-09-07 14:31:00",5],
                                ["2023-09-07 15:31:00",15],
                                ["2023-09-07 16:31:00",54],
                                ["2023-09-07 17:31:00",255],
                                ["2023-09-07 18:31:00",98],
                                ["2023-09-07 19:31:00",52],
                            ],
                        
                        },
                    

                    ]
            }
                dayEchart.setOption(options)    
            }else if(val==="year"){
                let yearDom=this.$refs.passenger
                let yearEchart=echarts.init(yearDom)
                // 重新渲染
                const options={
                    tooltip:{
                        show:true,
                        trigger:"axis",
                        // alwaysShowContent:true,
                        triggerOn:"mousemove",
                        textStyle:{
                            color:"#fff"
                        },
                        backgroundColor:'rgba(6,17,71,0.8)',
                        borderColor:"#0E8BFF",
                        borderWidth:2,
                        // formatter:"{b}销售额<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}"
                        // formatter:function(params){
                        //     console.log(params,"params")
                        //     if(params.length==0){return}
                        //     let base=params[0].name+"销售额"+"<br/>"
                        //     for(let i=0;i<params.length;i++){
                        //         base=base+`<span style="display: inline-block;padding: 5px 5px 5px 0px;"><i style="display: inline-block;width: 10px;height: 10px;background:${params[i].color};border-radius: 50%;"></i>
                        //             </span>`+params[i].seriesName+": "+params[i].value+"<br/>"
                        //     }
                        //     return base                
                        // }

                    },
                    legend:{
                        type:"plain",
                        show:true,
                        top:"7%",
                        right:"2%",
                        icon:"rect",
                        itemWidth:15,
                        itemHeight:15,
                        align:"left",
                        itemGap:10,
                        textStyle:{
                            fontSize:"15px",
                        },

                        data:[
                            {
                                name:"长者会员",
                                textStyle:{
                                    color:"#4FA6F7",
                                },
                                itemStyle:{
                                    color:"#0E8BFF"
                                },
                                
                            },
                            {
                                name:"其他顾客",
                                textStyle:{
                                    color:"#4FA6F7"
                                },
                                itemStyle:{
                                    color:"#E4C431"
                                },
                            },
                        ]
                    },
                    grid:{
                        show:false,
                        top:"25%",
                        left:"5%",
                        right:"5%",
                        bottom:"8%",
                        containLabel:true
                    },
                    xAxis:{
                        type:"category",
                        scale: true,
                        // boundaryGap: ['20%', '20%'],
                        // splitNumber:18,
                        // min: "2023-09-07 06:00:00",
                        // max: "2023-09-07 20:00:00",
                        show:true,
                        position:"bottom",
                        inverse:false,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:"#0d2766"
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel:{
                            interval:0,
                            show:true,
                            color:"#4FA6F7"
                        },
                        splitLine:{
                            show:false
                        },
                        data:[
                            "1月",
                            "2月",
                            "3月",
                            "4月",
                            "5月",
                            "6月",
                            "7月",
                            "8月",
                            "9月",
                        ]

                    },

                    yAxis:{
                        type:"value",
                        show:true,
                        position:"left",
                        inverse:false,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:"#0d2766"
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel:{
                            interval:0,
                            show:true,
                            color:"#4FA6F7"
                        },
                        splitLine:{
                            show:false
                        }

                    },
                    series:[
                        {
                            type:"line",
                            name:"总数",
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#1cdbfe"
                            },
                            data:[
                                {
                                    name:"1月",
                                    value:"26868"
                                },
                                {
                                    name:"2月",
                                    value:"40453"
                                },
                                {
                                    name:"3月",
                                    value:"50868"
                                },
                                {
                                    name:"4月",
                                    value:"53868"
                                },
                                {
                                    name:"5月",
                                    value:"46216"
                                },
                                {
                                    name:"6月",
                                    value:"55868"
                                },
                                {
                                    name:"7月",
                                    value:"66754" 
                                },
                                {
                                    name:"8月",
                                    value:"64868"
                                },
                                {
                                    name:"9月",
                                    value:"42002"
                                },
                    
                            ],
                        },
                        {
                            type:"bar",
                            barWidth:20,
                            stack:"总数",
                            name:"长者会员",
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#0DDE9C"
                            },
                            itemStyle: {
                                barBorderRadius: [10,10,0,0],
                                    color:  {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(14, 139, 255, 1)' // 100% 处的颜色
                                    
                                }, {
                                    offset: 1,
                                    color: 'rgba(21, 25, 82, 0)' // 0% 处的颜色
                                
                                }],
                                global: false // 缺省为 false
                                }
                    
                            },
                            data:[
                                {
                                    name:"1月",
                                    value:"20214"
                                },
                                {
                                    name:"2月",
                                    value:"30457"
                                },
                                {
                                    name:"3月",
                                    value:"40214"
                                },
                                {
                                    name:"4月",
                                    value:"42214"
                                },
                                {
                                    name:"5月",
                                    value:"36214"
                                },
                                {
                                    name:"6月",
                                    value:"43214"
                                },
                                {
                                    name:"7月",
                                    value:"50214"
                                },
                                {
                                    name:"8月",
                                    value:"49214"
                                },
                                {
                                    name:"9月",
                                    value:"32004"
                                },
                    
                            ],
                        
                        },
                        {
                            type:"bar",
                            barWidth:20,
                            stack:"总数",
                            name:"其他顾客",
                            barGap:'-100%',
                            z:-12,
                            symbol:"circle",
                            symbolSize:8,
                            label:{
                                show:false,
                                color:"#fff"
                            },
                            endLabel:{//最后端点的文字
                                show:false
                            },
                            itemStyle:{
                                color:"#00A3F8"
                            },
                            itemStyle: {
                                barBorderRadius: [10,10,0,0],
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(228, 196, 49, 1)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(21, 25, 82, 0)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                    }
                    
                            },
                            data:[
                                {
                                    name:"1月",
                                    value:"6654"
                                },
                                {
                                    name:"2月",
                                    value:"9996"
                                },
                                {
                                    name:"3月",
                                    value:"10654"
                                },
                                {
                                    name:"4月",
                                    value:"11654"
                                },
                                {
                                    name:"5月",
                                    value:"10002"
                                },
                                {
                                    name:"6月",
                                    value:"12654"
                                },
                                {
                                    name:"7月",
                                    value:"16540"
                                },
                                {
                                    name:"8月",
                                    value:"15654"
                                },
                                {
                                    name:"9月",
                                    value:"9998"
                                },
                
                            ],
                        
                        },
                    ]
                }

                yearEchart.setOption(options)
            }
        }
    },
    mounted(){
        this.dayFn()


    }
}

</script>

<style lang="scss" scoped>
.dv-border-box-7{
    border-radius: 3px;


}

:deep(.dv-border-svg-container) {
  display: none;
}

.passenger-box{
    position: relative;
    box-sizing: border-box;
    height: 100%;
    // background-color: pink;
}

.title-box span{
    color: #1CDBFE;
    font-size: 22px;
    font-family: Source Han Sans CN;
    letter-spacing:1px;
    font-weight: 300;
    position: absolute;
    top: 20px;
    left: 44px;
    &::before{
        position: absolute;
        content: "";
        width: 13px;
        height: 27px;
        border-radius: 6px;
        background-color:#1CDBFE;
        left: -24px;
        top: -3px;
    }
}

.tab-box{
    position: absolute;
    top: 20px;
    left: 220px;
    z-index: 99999;
}

:deep(.el-radio-group){
    .el-radio-button__inner{
        background:#131C59;
        color: #1CDBFE;
        border: 1px solid #1CDBFE;

    }

    .is-active .el-radio-button__inner{
           background: #1CDBFE;
           color: #FFFFFF;
         }
}

</style>